<template>
<div>
  <el-button @click="addUser">添加</el-button>
  <el-table
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="id"
      label="Id"
      width="180">
    </el-table-column>
    <el-table-column
      prop="username"
      label="用户姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="sex"
      label="性别">
    </el-table-column>
    <el-table-column
      prop="xueli"
      label="学历">
    </el-table-column>
    <el-table-column
      prop="hobby"
      label="爱好">
    </el-table-column>
     <el-table-column
      prop="dirthday"
      label="日期">
    </el-table-column>
     <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row.id)" type="text" size="small">删除</el-button>
        <el-button type="text" size="small">修改</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog
  title="创建"
  :visible.sync="dialogVisible"
  width="30%">
  <span>
   <el-form ref="form" :model="form" label-width="110px">
  <el-form-item label="请输入你的名字">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="学历">
    <el-select v-model="form.xueli" placeholder="请选择你的学历">
      <el-option label="本科" value="本科"></el-option>
      <el-option label="专科" value="专科"></el-option>
      <el-option label="高中" value="高中"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="时间">
    <el-col :span="100">
      <el-date-picker type="date" placeholder="选择日期" v-model="form.dirthday" style="width: 100%;"></el-date-picker>
    </el-col>
  </el-form-item>
  <el-form-item label="兴趣爱好">
    <el-checkbox-group v-model="form.hobby">
      <el-checkbox label="唱" name="hobby"></el-checkbox>
      <el-checkbox label="跳" name="hobby"></el-checkbox>
      <el-checkbox label="ripper" name="hobby"></el-checkbox>
      <el-checkbox label="篮球" name="hobby"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="性别">
    <el-radio-group v-model="form.sex">
      <el-radio label="男"></el-radio>
      <el-radio label="女"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
  </el-form-item>
</el-form>
  </span>
</el-dialog>
</div>
</template>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

<script>
import ax from 'axios';
import qs from 'qs';


  export default {
    methods: {
      addUser(){
        this.dialogVisible=true
      },
      onSubmit() {
        alert(JSON.stringify(this.form)),
        ax.post('http://localhost:8080/user',qs.stringify(this.form)).then(function(response){
          console.log(response);
        }).catch(function(error){
          console.log(error);
        })
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      handleClick(uid){
        console.log(uid);
        //调用删除的方法
        ax.delete('http://localhost:8080/user/'+uid)
        .then(function(r){
          let re = r.data;
          console.log(re);
          if(re==200){
            this.shuaxin();
          }
        })
      }
    },
    data() {
      return {
        tableData: [],
        dialogVisible:false,
        labelPosition: 'right',
        form: {
          name: '',
          xueli: '',
          dirthday: '',
          hobby: [],
          sex: '',
        }
      }
    },
    created(){
      let _that = this;
        //发出aixos
        ax.get('http://localhost:8080/user')
        .then(function(response){
            console.log(response.data);
            let resdata = response.data;
            let tabdata = resdata.t;
            _that.tableData = tabdata;
        })
        .catch(function (error){
            console.log(error);
        });
    },
    shuaxin(){
      this.created();
    }
  }
</script>